<template>
  <div class="step_05">
    <el-button @click="addRect" size="mini" type="primary" plain
      >addRect</el-button
    >
    <el-button @click="addRectDefault" size="mini" type="primary" plain
      >设置默认值</el-button
    >
    <el-button @click="toJSON" size="mini" type="primary" plain
      >toJSON</el-button
    >
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph, Shape, Node, ObjectExt } from "@antv/x6";
export default {
  data() {
    return {
      graph: null,
      curCel: null,
      data: {},
    };
  },
  methods: {
    toJSON() {
      console.log(this.graph.toJSON());
    },
    addRect() {
      this.graph.addNode({
        shape: "rect",
        x: 100,
        y: 100,
        rx_zml: 4,
        width: 100,
        height: 50,
        attrs: {
          label: {
            text: "矩形",
          },
        },
      });
    },
    addRectDefault() {
      Shape.Rect.config({
        attrs: {
          label: {
            fill: "red",
          },
        },
        data: {
          tableId: 1,
        },
        // 通过钩子将 label 应用到 'attrs/text/text' 属性上
        // propHooks(metadata) {
        //   console.log(metadata);
        //   const { data, ...others } = metadata;
        //   if (data) {
        //     ObjectExt.setByPath(others, "data/tableId", 2);
        //   }
        //   // ObjectExt.setByPath(others, 'attrs/body/fill', "green")

        //   return others;
        // },

        // 自定义属性
        propHooks: {
          rx_zml(metadata) {
            console.log(11);
            const { rx_zml, ...others } = metadata;
            if (rx_zml != null) {
              ObjectExt.setByPath(others, "attrs/body/rx", rx_zml);
            }
            return others;
          },
          ry(metadata) {
            const { ry, ...others } = metadata;
            if (ry != null) {
              ObjectExt.setByPath(others, "attrs/body/ry", ry);
            }
            return others;
          },
        },
      });
    },
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1000,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
  },
};
</script>
<style scoped>
</style>